<template>
  <div>
    <!-- 搜索框 -->
    <van-nav-bar title="今日头条" right-text="搜索" left-arrow @click-right="onClickRight" />
    <!-- 头部导航栏 -->
    <TabNav @onclick="OnClick" :listItem="listItem" />
    <!-- 头部导航栏 -->
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-card
          :desc="item.publishDateStr"
          :title="item.title"
          :thumb="item.imageUrls"
          v-for="(item,index) in listNews"
          :key="index"
          @click="ONCLICK(item)"
        />
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
import TabNav from "../components/TabNav";
import axios from "axios";
export default {
  data() {
    return {
      count: 0,
      loading: false,
      finished: false,
      refreshing: false,
      finished: false,
      listItem: [
        "要闻",
        "推荐",
        "热点",
        "体育",
        "娱乐",
        "足球",
        "星座",
        "国际",
      ],         //新闻
      listNews: [],
      defaultIndex: 0,
    };
  },
  components: {
    TabNav,
  },
  methods: {
    ONCLICK(item) {
      window.location.href = item.url;
    },
    onClickRight(){
      this.$router.push("/About")
    },
    OnClick(index) {
      axios
        .get("http://api.kudesoft.cn/news/list", {
          params: {
            kw: this.listItem[index],
          },
        })
        .then((res) => {
          // console.log(res.data.result.data);
          console.log(this.listItem[index]);
          this.listNews = res.data.result.data;
          console.log(this.finished);           //loadin事件
          console.log(this.loading);            //加载中提示状态
          console.log(this.refreshing);         //加载完成提示
        })
        .catch((err) => {
          console.log("请求超时");
        });
    },
    //下拉刷新事件
    onRefresh() {
      axios
        .get("http://api.kudesoft.cn/news/list", {
          params: {
            kw: this.listItem[this.defaultIndex],
          },
        })
        .then((res) => {
          console.log(this.defaultIndex);
          this.listNews = [];
          this.listNews = res.data.result.data;
          this.refreshing = false;
          //console.log(this.refreshing);//false
        });
      //  console.log(this.refreshing);//true
      this.finished = false;
    },
    onLoad() {
      axios
        .get("http://api.kudesoft.cn/news/list", {
          params: {
            kw: this.listItem[this.defaultIndex],
          },
        })
        .then((res) => {
          this.listNews = [...this.listNews, ...res.data.result.data];
          this.loading = false;
        });
      if (this.listNews.length >= 40) {
        this.finished = true;
      }
    },
  },

  mounted() {
    axios
      .get("http://api.kudesoft.cn/news/list", {
        params: {
          kw: this.listItem[0],
        },
      })
      .then((res) => {
        this.listNews = res.data.result.data;
        // console.log(this.finished);
        // console.log(this.loading);
        // console.log(this.refreshing);
      })
      .catch((err) => {
        console.log("请求超时");
      });
  },
};
</script>

<style scoped>

</style>

